import Button from './components/Button';
import Menu from './components/Menu';
import MenuItem from './components/Menu/menu-item';
import SubMenu from './components/Menu/sub-menu';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import Icon from './components/Icon/index';
library.add(fas);

function App() {
    return (
        <div className="App">
            <Icon icon='code-commit' theme='info' size='10x'/>
            {/* Button组件 */}
            <>
                <Button size='lg'>Large</Button>
                <Button size='sm'>Small</Button>
                <Button>Default</Button>
                <Button disabled size='lg'>disabled</Button>
                <hr />
                <Button btnType='default'>Default</Button>
                <Button target="_blank" href="https://jd.com" btnType='link'>Link</Button>
                <Button onClick={(e) => { console.log(e); }} btnType='primary'>Primary</Button>
                <Button btnType='danger'>Danger</Button>
            </>
            <hr />
            {/* Menu组件 */}
            <>
                {/* <Menu defaultIndex={'0'} mode="horizontal" onSelect={(index) => { alert(index); }}>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                </Menu>
                <hr /> */}
                {/* <Menu defaultIndex={'0'} mode="vertical" onSelect={(index) => { alert(index); }}>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                </Menu>
                */}
                <Menu defaultIndex={'0'} mode="horizontal" onSelect={(index) => { console.log(index); }}>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <SubMenu title='dropdown'>
                        <MenuItem>
                            down1
                        </MenuItem>
                        <MenuItem>
                            down1
                        </MenuItem>
                    </SubMenu>
                </Menu>
                <Menu defaultIndex={'0'}
                    mode="vertical"
                    onSelect={(index) => { console.log(index); }}
                    defaultOpenSubMenu={['2', '3']}
                >
                    <MenuItem>
                        index0
                    </MenuItem>
                    <MenuItem>
                        index1
                    </MenuItem>
                    <SubMenu title='dropdown2'>
                        <MenuItem>
                            down 2-1
                        </MenuItem>
                        <MenuItem>
                            down 2-2
                        </MenuItem>
                    </SubMenu>
                    <SubMenu title='dropdown3'>
                        <MenuItem>
                            down 3-1
                        </MenuItem>
                        <MenuItem>
                            down 3-2
                        </MenuItem>
                    </SubMenu>
                </Menu>
            </>
        </div >
    );
}

export default App;
